<style lang="scss" scoped>
  page{
    background: #f8f8f8;
    padding: 30rpx 0;
  }
  .order-box{
    margin: 0rpx 20rpx;
    border-radius: 10rpx;
    box-shadow: 0px 6px 21.36px 2.64px rgba(0, 0, 0, 0.09);
    .order-info{
      padding: 50rpx 0;
      text-align: center;
      box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.09);
    }
    .order-ext-info{
      border-top: 1px solid #bbb;
      padding: 30rpx 0;
      margin: 0 30rpx;
    }
    .order-total{
      padding: 30rpx;
    }
    .order-goods-list{
      margin:0 30rpx;
      padding: 30rpx 0;
      border-bottom: 1px dashed #ddd;
      .order-goods-item{
        margin-bottom: 30rpx;
        display: flex;
        &:last-child{
          margin-bottom: 0;
        }
        .goods-logo{
          width: 150rpx;
          height: 150rpx;
          border-radius: 6rpx;
          @include cover-img();
          margin-right: 30rpx;
        }
        .goods-info{
          flex: 1;
        }
        .pricenum{
          margin-left: 30rpx;
        }

      }
    }
    .order-action-list{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .order-action-btn{
      width: 150rpx;
      height: 60rpx;
      text-align: center;
      line-height: 60rpx;
      border-radius: 6rpx;
      border-width: 1px;
      border-style: solid;
      margin-right: 30rpx;
      font-size: 14px;
      &:last-child{
        margin-right: 0;
      }
      &.cancel{
        color: #686868;
        border-color: #b5b5b5;
      }
      &.pay{
        color: $fun-primary-color;
        border-color: $fun-primary-color;
      }
    }
  }
</style>
<template>
  <div class="page-wrap">
    <div class="h15"></div>
    <div class="order-box">
      <div class="order-info">
        <div class="fz-13 c3 m-b-15 ">{{order.status_text}}</div>
        <div class="m-b-10"><layout-icon size="26" type="icon-daifukuan1"></layout-icon></div>
        <div class="m-b-20 fz-14" v-if="order.pay_state===0 && order.status ===2 && countdown">{{ countdown }}后该订单会自动取消</div>
        <div class="order-action-list">
          <div class="order-action-btn cancel" @click="cancelOrderFunc" v-if="(order.pay_state===1 && order.status ===3) || (order.pay_state===0 && order.status ===2)">取消订单</div>
          <div class="order-action-btn pay" @click="againPay" v-if="order.pay_state===0 && order.status ===2">立即支付</div>

          <div class="order-action-btn" @click="toQuerySend" v-if="order.status>=4">查看物流</div>
          <div class="order-action-btn pay" @click="confirmGet" v-if="order.status==4">确认收货</div>

        </div>
      </div>
      <div class="order-goods-list m-t-20 m-b-20">
        <div class="order-goods-item" v-for="(goods,idx2) in order.list" :key="idx2">
          <div class="goods-logo" :style="{backgroundImage:'url('+goods.goods_logo+')'}"></div>
          <div class="goods-info">
            <div class="c3 m-b-10 fz-13">{{goods.goods_title}}</div>
            <div class="c9 fz-12">{{goods.goods_spec}}</div>
          </div>
          <div class="pricenum">
            <div class="fz-12 c3 text-right">{{goods.price_selling}}</div>
            <div class="fz-10 c9 text-right">x{{goods.number_goods}}</div>
          </div>
        </div>
      </div>
      <div class="order-total c3 fz-14 flex flex-justify-between">
        <span>合计</span>
        <span>共{{order.order_number_goods}}件 总金额<span class="fz-14 fz-b">￥{{order.price_goods}}</span></span>
      </div>
      <div class="order-ext-info">
        <div class="fz-14 c3 m-b-8">订单编号(核销码):{{order.order_no}}</div>
        <block v-if="order.type=='goods' && order.status>=4">
          <div class="fz-14 c3 m-b-8">物流编号:{{order.express_send_no}} <span class="p-l-6 color-primary" @click="$copy(order.express_send_no)">复制</span></div>
          <div class="fz-14 c3 m-b-8">物流公司:{{order.express_company_title}}</div>
          <div class="fz-14 c3 m-b-8">发货时间:{{order.express_send_at}}</div>
          <div class="fz-14 c3 m-b-8" v-if="order.type=='goods' && order.status===5">收货时间:{{order.express_done_at}}</div>
        </block>
        <div class="fz-14 c3">下单时间:{{order.create_at}}</div>
      </div>
    </div>

  </div>
</template>

<script>
import { cancelOrder, order, unifyPay, confirmOrderGet } from '@/api/user'
import { Exception } from '@/common/Exception'
import { confirm, error, hideLoading, toast, showLoading } from '@/common/fun'
import { pageMixin } from '@/mixins'
import LayoutIcon from '@/components/layout-icon/layout-icon'

import { orderCancelTime } from '@/common/env'

var intervalInstance = null
export default {
  components: { LayoutIcon },
  mixins: [pageMixin],
  name: 'orderDetail',
  data () {
    return {
      nowTime: 0,
      orderPayEndTime: 0,
      orderPayEndTimeStr: '',
      countdown: '',
      order: {}
    }
  },
  methods: {
    toQuerySend () {
      uni.navigateToMiniProgram({
        appId: 'wx6885acbedba59c14'
      })
    },
    async confirmGet () {
      try {
        showLoading()
        await confirmOrderGet({ order_no: this.order.order_no }).catch(err => { throw err })
        await this._init_func()
        hideLoading()
        toast('操作成功')
      } catch (err) {
        hideLoading()
        Exception.handle(err)
      }
    },
    async cancelOrderFunc () {
      try {
        await confirm({
          title: '操作提示',
          content: '取消订单后不可恢复，是否确认操作?'
        }).then(() => {

        }).catch(() => {
          throw Error('nocare')
        })
        await cancelOrder({ order_no: this.order.order_no }, { tip: '操作中' }).catch(err => {
          throw err
        })
        this._init_func()
      } catch (e) {
        e.type = 'modal'
        Exception.handle(e)
      }
    },
    async againPay () {
      try {
        hideLoading()
        const order_no = this.order.order_no

        const ret = await unifyPay({
          order_no,
          channel: 'wx_mini',
          body: `订单${order_no}重新支付`
        }).then(res => res.data).catch(error => {
          throw Error(error.msg || '获取支付参数失败')
        })

        // 万一遇到不需要支付的牛逼订单
        // if (typeof ret === 'object' && ret.hasOwnProperty('is_require_pay') && !ret.is_require_pay) {
        //   this._init_func()
        //   throw Error('nocare')
        // }
        const payConf = JSON.parse(ret)

        console.log(payConf)
        // 仅作为示例，非真实参数信息。
        uni.requestPayment({
          provider: 'wxpay',
          ...payConf,
          success: (res) => {
            console.log('success:' + JSON.stringify(res))
            toast('支付成功')
            this._init_func()
          },
          fail: function (err) {
            error('购买失败')
            console.log('fail:' + JSON.stringify(err))
          }
        })
      } catch (e) {
        Exception.handle(e)
      }
    },
    minusFnBy () {
      if (this.nowTime < this.orderPayEndTime) {
        this.nowTime++
        var countS = this.orderPayEndTime - this.nowTime
        this.countdown = parseInt(countS / 60) + '分' + (countS % 60) + '秒'
        return
      }
      clearInterval(intervalInstance)
    },
    async _init_func () {
      const orderInfo = await order({ id: this.id }).then(res => res.data).catch(err => Exception.handle(err))
      this.order = orderInfo

      console.log(orderInfo.status === 2 && orderInfo.pay_state === 0)
      if (orderInfo.status === 2 && orderInfo.pay_state === 0) {
        var createAtStamp = uni.$dayjs(orderInfo.create_at).unix()
        this.nowTime = uni.$dayjs().unix()
        this.orderPayEndTime = createAtStamp + orderCancelTime
        this.orderPayEndTimeStr = uni.$dayjs.unix(this.orderPayEndTime).format('YYYY-MM-DD HH:mm')
        setInterval(this.minusFnBy, 1000)
      }
    }
  },
  onLoad (options) {
    this.id = options.id
    this._init_func()
  },
  async created () {

  }
}
</script>
